export const dynamic = "force-dynamic";
/**
 * /sign-up — Custom email + password sign-up flow for the storefront.
 *
 * Phone number is never required here. It is collected optionally
 * on /activate/[orderId] after purchase.
 */
import { Suspense } from "react";
import { StorefrontSignUpClient } from "./StorefrontSignUpClient";

export const metadata = { title: "Sign up" };

export default function SignUpPage() {
  return (
    <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center px-4">
      <Suspense
        fallback={
          <div className="text-center space-y-3">
            <div className="mx-auto size-8 animate-spin rounded-full border-2 border-[var(--brand-accent)] border-t-transparent" />
            <p className="text-sm text-sand-600 dark:text-sand-400">Loading…</p>
          </div>
        }
      >
        <StorefrontSignUpClient />
      </Suspense>
    </div>
  );
}